<template>
  <div class="app-container own-app-container">
    <el-main>
      <el-table size="mini" stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" v-loading="tabLoading"
                style="width: 100%" :row-class-name="tableRowClassName" border @selection-change="handleSelectionChange"
                :default-sort="{prop: 'date', order: 'descending'}" highlight-current-row row-key="id"
      >
        <!-- <el-table-column type="selection" width="50" align="center"></el-table-column> -->
        <el-table-column type="index" label="序号" width="50" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="流程" prop="flow_type_name" width="105" header-align="center" align="center"
                         show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag size="mini" type="primary" effect="plain">{{ scope.row.flow_type_name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" min-width="100" header-align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="创建人" prop="applyer_name" width="80" header-align="center" align="center"
                         show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="创建人部门" prop="applyer_department_name" header-align="center" align="center"
                         width="140" show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="创建时间" prop="create_at" width="155" header-align="center" align="center">
        </el-table-column>
        <el-table-column label="状态" prop="status" width="105" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.status==0" type="info">草稿</el-tag>
            <el-tag size="mini" v-else-if="scope.row.status==1" type="primary">审批中</el-tag>
            <el-tag size="mini" v-else-if="scope.row.status==2" type="success">已通过</el-tag>
            <el-tag size="mini" v-else-if="scope.row.status==3" type="danger">已删除</el-tag>
            <el-tag size="mini" v-else-if="scope.row.status==4" type="warning">被退回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="删除时间" prop="flow_at" width="155" header-align="center" align="center">
        </el-table-column>
        <!-- <el-table-column label="当前节点" prop="node_name" width="105" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" type="primary" effect="plain">{{scope.row.node_name}}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="operation">
              <el-button-group>
                <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="handleOne(scope.row, 1)">编辑
                </el-button>
                <!-- <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button> -->
              </el-button-group>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页数据 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="current" :page-sizes="[10, 20, 50]" :page-size="listParams.page_size"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"
      ></el-pagination>
    </el-main>
  </div>
</template>

<script>
import {
  delete_list as list
} from '@/api/handle/personal_handle'
import handleUtil from './js/handle.js'
import { generateUUID } from '@/utils/util'
import distinct_arr from '@/views/personal/handle/js/routerUtil'

export default {
  name: 'PersonalProcessingList',
  // beforeRouteLeave(to, from, next) {
  //   this.$destroy()
  //   next()
  // },
  data() {
    return {
      // list table
      tableData: [], // 列表数据
      selectIds: [], // 多选选项id
      tabLoading: false,
      total: null, // 总页数
      current: 1, // 当前页

      listParams: {
        page: 1,
        page_size: 10
      }, // list参数
      searchForm: {},
      loading: null
    }
  },
  mounted() {
    this.getList()
  },
  created() {
    this.$store.dispatch('flow/getFlowObj')
  },
  methods: {
    handleOne(row, type) {
      const that = this
      const tmp_arr = distinct_arr
      let flowTypeRouter = this.$store.getters.getFlowTypeRouter(row.flow_type)
      let params = handleUtil.genRedirectParam(row.id, row.data_id, type, 1, row.flow_type)
      if (tmp_arr.includes(flowTypeRouter)) {
        const uuid = generateUUID()
        this.$store.commit('keep/PUT_PAGE_PARAMS', {
          uuid: uuid,
          data: params
        })
        this.$router.push({
          name: flowTypeRouter,
          query: {
            uuid: uuid
          }
        })
      } else {
        that.$router.push({
          name: that.$store.getters.getFlowTypeRouter(row.flow_type),
          params: params
        })
      }
    },
    getList() {
      this.tabLoading = true
      return list(this.listParams)
        .then(res => {
          let {
            data: {
              records,
              total
            }
          } = res

          this.tableData = records.map(item => {
            return item
          })
          this.total = total
          this.tabLoading = false
        })
        .catch(() => {
          this.tabLoading = false
        })
    },

    // // 重置搜索表单
    // searchReset() {
    // 	this.$refs.searchForm.resetFields()
    // 	const params = this.$refs.searchForm.model
    // 	this.listParams = Object.assign(this.listParams, params)
    // 	this.getList()
    // },
    // // 搜索
    // searchSubmit(formName) {
    // 	this.$refs[formName].validate(valid => {
    // 		if (valid) {
    // 			const params = this.$refs[formName].model
    // 			this.listParams.page = 1
    // 			this.current = 1
    // 			this.listParams = Object.assign(this.listParams, params)
    // 			this.getList()
    // 		} else {
    // 			console.log('error submit!!')
    // 			return false
    // 		}
    // 	})
    // },
    // // 移除
    // deleteRow(index, rows) {
    // 	rows.splice(index, 1);
    // },

    // 表单多选
    handleSelectionChange(val) {
      this.selectIds = val.map(item => item.id)
    },
    // 分页 -pageSize改变
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    // 分页 -pageNum改变
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    //带状态表格
    tableRowClassName({
      row
    }) {
      return ''
    }

  }
}
</script>

<style scoped lang="scss">
.building-code-input {
  /deep/ .el-input__inner {
    padding-left: 5px !important;
    padding-right: 5px !important;
    text-align: center;
  }
}

.building-code-collapse.el-collapse {
  border-top: none;
}
</style>
<style lang="scss" scoped>
.app-container {
  .el-table {
    margin-top: 20px;

    .names-tag {
      box-sizing: border-box;
      margin: 3px;
    }

    /deep/ .stop-row {
      color: #bbb !important;
    }
  }
}
</style>
<style lang="css" scoped>
.upload-demo {
  display: inline-block !important;
  margin-left: 10px !important;
}
</style>
